<template>
    <div :class="[{ 'fullscreen-handle': fullscreenHandleShow }]">
        <div class="list-header">
            BOM
            <el-button
                type="primary"
                @click="createBOM"
                :disabled="isView == 1"
                :loading="createBOMLoading"
                >创建BOM</el-button
            >
            <el-popover :visible="visible" placement="top" :width="160">
                <p>请输入新增包装数量</p>
                <div style="margin: 10px 0">
                    <el-input-number
                        v-model="addNum"
                        style="width: 100%"
                        :max="100"
                        :min="1"
                        :precision="0"
                        :controls="false"
                        :clearable="false"
                        placeholder="请输入"
                        :disabled="isView == 1"
                        @focus="handleFocus"
                    />
                </div>
                <div style="text-align: right; margin: 0">
                    <el-button size="small" text @click="visible = false"
                        >取消</el-button
                    >
                    <el-button size="small" type="primary" @click="addBom">
                        确认
                    </el-button>
                </div>
                <template #reference>
                    <el-button
                        type="primary"
                        @click="visible = true"
                        :disabled="isView == 1"
                        >新增包装物料</el-button
                    >
                </template>
            </el-popover>
            <el-button type="primary" @click="packDel" :disabled="isView == 1"
                >删除</el-button
            >
            <div
                style="float: right; margin-right: 20px; cursor: pointer"
                @click="fullscreenHandleShow = !fullscreenHandleShow"
            >
                <div
                    class="gvaIcon gvaIcon-fullscreen-shrink"
                    v-if="fullscreenHandleShow"
                ></div>
                <div class="gvaIcon gvaIcon-fullscreen-expand" v-else></div>
            </div>
        </div>
        <div>
            <div style="margin-bottom: 10px">
                <LTable
                    :columns="createColumns"
                    :tableData="createTableData"
                    :pagination="false"
                    :selection="false"
                    :showConfig="false"
                    :tableProps="{
                        height: auto,
                    }"
                >
                    <template #size="{ row }">
                        <span>{{ row.sizeNum }}</span>
                    </template>
                    <template #checkAll="{ row, tableindex }">
                        <div style="text-align: center; width: 100%">
                            <el-checkbox
                                @change="
                                    ($event) =>
                                        handleCheckAllChange($event, row)
                                "
                                :indeterminate="row.isIndeterminate"
                                v-model="row.checkAll"
                                :disabled="isView == 1"
                            ></el-checkbox>
                        </div>
                    </template>
                    <template #color="{ row, tableindex }">
                        <el-checkbox-group
                            v-model="row.colorsList"
                            :disabled="isView == 1"
                            @change="
                                ($event) =>
                                    handleCheckedCitiesChange($event, row)
                            "
                        >
                            <el-checkbox
                                :value="item.colorNum"
                                v-for="(item, index) in props.colors"
                            >
                                {{ item.colorNum }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </template>
                </LTable>
            </div>
            <el-table
                :data="tableData"
                v-loading="createBOMLoading"
                row-key="ida"
                border="true"
                default-expand-all="true"
                style="width: 100%"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="isDel" label="" width="40">
                    <template #default="{ row, $index }">
                        <el-checkbox
                            :key="row.ida"
                            v-model="row.isDel"
                            v-if="row.is_pack == 1"
                            :disabled="isView == 1"
                        ></el-checkbox>
                        <el-checkbox
                            v-model="row.isDel"
                            disabled
                            v-else
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="index"
                    label="级别"
                    width="50"
                ></el-table-column>
                <el-table-column prop="lct" label="ICT" width="80px">
                    <template #default="{ row }">
                        <div style="width: 60px" v-if="row.is_pack == 0">
                            <select
                                v-model="row.lct"
                                placeholder
                                :disabled="isView == 1"
                                style="width: 100%; font-size: 16px"
                            >
                                <option label="F" :value="'F'">F</option>
                                <option label="L" :value="'L'">L</option>
                            </select>
                        </div>
                        <div style="width: 60px" v-else>
                            <select
                                :disabled="row.lctOld == 'L' || isView == 1"
                                v-model="row.lct"
                                style="width: 100%; font-size: 16px"
                                placeholder
                            >
                                <option label="F" :value="'F'">F</option>
                                <option label="L" :value="'L'">L</option>
                            </select>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="accessoryName"
                    label="元件名称"
                    width="200px"
                ></el-table-column>
                <el-table-column
                    prop="componentNum"
                    label="元件编号"
                    width="150px"
                >
                    <template #default="{ row }">
                        <el-input
                            v-if="row.is_pack == 1"
                            v-model="row.componentNum"
                            @input="genMasterBOMListForPackageFun(row)"
                            :disabled="isView == 1"
                        />
                        <span v-else>{{ row.componentNum }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="group"
                    label="物料群组"
                    width="80px"
                ></el-table-column>

                <el-table-column
                    prop="materialDesc"
                    label="物料说明"
                ></el-table-column>
                <el-table-column prop="num" label="数量" width="80px">
                    <template #default="{ row }">
                        <!-- <el-input
                            v-if="row.is_pack == '1'"
                            :disabled="isView == 1"
                            v-model="row.num"
                            @focus="handleFocus"
                        /> -->
                        <el-input-number
                            v-if="row.is_pack == '1'"
                            :controls="false"
                            :clearable="false"
                            :disabled="isView == 1"
                            v-model="row.num"
                            @input="handleInput(row)"
                            @focus="handleFocus"
                        />
                        <div v-else style="text-align:center;width:100%">{{ row.num }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="unit"
                    label="单位"
                    width="70px"
                ></el-table-column>
                <el-table-column prop="CO" label="CO" width="50px">
                    <template #default="{ row, $index }">
                        <el-icon
                            :style="[
                                { 'margin-right': '10px' },
                                { 'font-size': '20px' },
                                { width: '28px' },
                                { cursor: 'pointer' },
                                {
                                    color:
                                        (row.sizeList &&
                                            row.sizeList.length > 0) ||
                                        (row.includedAngleList &&
                                            row.includedAngleList.length > 0) ||
                                        (row.colorList &&
                                            row.colorList.length > 0) ||
                                        (row.SellGroup &&
                                            row.SellGroup.length > 0)
                                            ? '#4d70ff'
                                            : '',
                                },
                            ]"
                            @click="SortCoItemHandle(row, $index)"
                            v-if="
                                row.index == '1' &&
                                (!row.is_na || row.is_na != 1)
                            "
                            ><Checked
                        /></el-icon>
                        <el-icon
                            style="font-size: 20px"
                            v-if="row.index == '1' && row.is_na == 1"
                            ><Compass
                        /></el-icon>
                    </template>
                </el-table-column>
                <el-table-column prop="SortCo" label="排序字串" width="80px">
                    <template #default="{ row, $index }">
                        {{ row.SortCo }}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog
            v-model="SortCoItemShow"
            destroy-on-close
            fullscreen
            title="CO"
            :top="'50px'"
            class="dialog-box-1"
        >
            <div style="max-height: calc(100vh - 115px); overflow: scroll">
                <div
                    class="dialog-style"
                    style="
                        border-bottom: 1px dotted #ccc;
                        margin-bottom: 10px;
                        height: 23px;
                    "
                >
                    <div class="component-num">元件编号</div>
                    <div class="num">数量</div>
                    <div class="size" style="align-items: center">
                        尺码
                        <el-checkbox
                            :disabled="isView == 1"
                            v-if="SortCoItemList && SortCoItemList.length > 1"
                            v-model="sizeAll"
                            style="margin-left: 10px"
                            @change="
                                (val) => {
                                    sizeAllChange(val);
                                }
                            "
                            >全选</el-checkbox
                        >
                    </div>
                    <div class="color" style="align-items: center">
                        颜色
                        <el-checkbox
                            :disabled="isView == 1"
                            v-if="SortCoItemList && SortCoItemList.length > 1"
                            v-model="colorAll"
                            style="margin-left: 10px"
                            @change="
                                (val) => {
                                    colorAllChange(val);
                                }
                            "
                            >全选</el-checkbox
                        >
                    </div>
                    <div
                        class="group"
                        v-if="
                            props.customerBrand == 'LEVIS' ||
                            props.customerBrand == 'levis' ||
                            props.customerBrand == 'fila' ||
                            props.customerBrand == 'FILA'
                        "
                    >
                        销售组织
                    </div>
                </div>
                <div
                    v-for="(SortCoItem, index) in SortCoItemList"
                    :key="index"
                    style="border-bottom: 1px dotted #ccc; margin-bottom: 10px"
                >
                    <div class="dialog-style">
                        <div class="component-num">
                            <!-- <div>{{ SortCoItem.componentNum }}</div> -->
                            <el-input
                                v-if="SortCoItem.is_pack == 1"
                                v-model="SortCoItem.componentNum"
                                @input="genMasterBOMListForPackageFun(SortCoItem)"
                                :disabled="isView == 1"
                            />
                            <span v-else>{{ SortCoItem.componentNum }}</span>
                        </div>
                        <div class="num" style="padding-right:10px">
                            <!-- <el-input
                                v-if="SortCoItem.is_pack == '1'"
                                :disabled="isView == 1"
                                v-model="SortCoItem.num"
                            />
                            <span v-else>{{ SortCoItem.num }}</span> -->
                            <el-input-number
                                v-if="SortCoItem.is_pack == '1'"
                                :controls="false"
                                :clearable="false"
                                :disabled="isView == 1"
                                @input="handleInput(SortCoItem)"
                                v-model="SortCoItem.num"
                                @focus="handleFocus"
                                style="width:100%"
                            />
                            <div v-else style="text-align:center;width:100%">{{ SortCoItem.num }}</div>
                        </div>
                        <div class="size">
                            <div style="display: flex; align-items: center">
                                <!-- <span>尺码：</span> -->
                                <el-checkbox
                                    :disabled="
                                        SortCoItem.is_pack != '1' || isView == 1
                                    "
                                    style="height: 32px; margin-right: 10px"
                                    v-model="SortCoItem.sizeCheckedAll"
                                    @change="
                                        (val) => {
                                            sizeCheckAll(val, SortCoItem);
                                        }
                                    "
                                    >全选</el-checkbox
                                >
                            </div>
                            <div>
                                <el-checkbox-group
                                    :disabled="
                                        SortCoItem.is_pack != '1' || isView == 1
                                    "
                                    v-model="SortCoItem.sizeList"
                                    @change="sizeListChange(SortCoItem)"
                                >
                                    <template v-for="(item, index) in sizes">
                                        <el-checkbox
                                            :value="item.sizeNum"
                                            name="item"
                                            v-if="
                                                item.sizeNum.split('-')
                                                    .length == 3
                                            "
                                        >
                                            {{ item.sizeNum }}
                                        </el-checkbox>
                                    </template>
                                </el-checkbox-group>
                                <el-checkbox-group
                                    :disabled="
                                        SortCoItem.is_pack != '1' || isView == 1
                                    "
                                    v-model="SortCoItem.includedAngleList"
                                    @change="sizeListChange(SortCoItem)"
                                >
                                    <template v-for="(item, index) in sizes">
                                        <el-checkbox
                                            :value="item.sizeNum"
                                            name="item"
                                            v-if="
                                                item.sizeNum.split('-')
                                                    .length == 1
                                            "
                                        >
                                            {{ item.sizeNum }}
                                        </el-checkbox>
                                    </template>
                                </el-checkbox-group>
                            </div>
                        </div>
                        <div class="color">
                            <div style="display: flex; align-items: center">
                                <!-- <span>颜色：</span> -->
                                <el-checkbox
                                    :disabled="
                                        SortCoItem.is_pack != '1' || isView == 1
                                    "
                                    v-model="SortCoItem.colorCheckedAll"
                                    style="height: 32px; margin-right: 10px"
                                    @change="
                                        (val) => {
                                            colorCheckAll(val, SortCoItem);
                                        }
                                    "
                                    >全选</el-checkbox
                                >
                            </div>
                            <el-checkbox-group
                                :disabled="
                                    SortCoItem.is_pack != '1' || isView == 1
                                "
                                v-model="SortCoItem.colorList"
                                @change="colorListChange(SortCoItem)"
                            >
                                <el-checkbox
                                    :value="item.colorNum"
                                    name="item"
                                    v-for="(item, index) in colors"
                                >
                                    {{ item.colorNum }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="group"
                            v-if="
                                (props.customerBrand == 'LEVIS' ||
                                    props.customerBrand == 'levis' ||
                                    props.customerBrand == 'fila' ||
                                    props.customerBrand == 'FILA') &&
                                SortCoItem.is_pack == 1
                            "
                        >
                            <div
                            >
                                <!-- 销售组织： -->
                                <el-checkbox-group
                                    :disabled="
                                        SortCoItem.is_pack != '1' || isView == 1
                                    "
                                    v-model="SortCoItem.SellGroup"
                                >
                                    <el-checkbox :value="'1000'" name="1000">
                                        1000
                                    </el-checkbox>
                                    <el-checkbox :value="'9000'" name="9000">
                                        9000
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <el-button type="primary" @click="SortCoItemShow = false"
                    >关闭</el-button
                >
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {
    onMounted,
    reactive,
    toRefs,
    ref,
    watchEffect,
    defineExpose,
    watch,
} from "vue";
import LTable from "@/components/LTable/LTable.vue";
import { deepClone2 } from "@/utils/tool.js";
import { ElMessage, ElMessageBox } from "element-plus";
import {
    genMasterBOMList,
    genMasterBOMListForPackage,
} from "@/api/plmMasterBOM";
const props = defineProps({
    colors: {
        type: Array,
        default: () => {
            return [];
        },
    },
    sizes: {
        type: Array,
        default: () => {
            return [];
        },
    },
    styleNum: {
        type: String,
        default: "",
    },
    customerBrand: {
        type: String,
        default: "",
    },
    formData: {
        type: Object,
        default: {},
    },
    productspecID: {
        type: String,
        default: "",
    },
    zhaiJiaZhuDangList: {
        type: String,
        default: [],
    },
    isView: {
        type: String,
        default: "0",
    },
});

const tableData = ref([]);
const tableData1 = ref([]);
const visible = ref(false);
const addNum = ref(1);

const createColumns = ref([
    {
        prop: "size",
        label: "尺码",
        show: true,
        fixedWidth: "400",
        tableColumnProps: {
            sortable: false,
        },
        slot: "size",
    },
    {
        prop: "checkAll",
        label: "全选",
        show: true,
        align: "center",
        fixedWidth: "50",
        tableColumnProps: {
            sortable: false,
        },
        slot: "checkAll",
    },
    {
        prop: "color",
        label: "颜色",
        show: true,
        tableColumnProps: {
            sortable: false,
        },
        slot: "color",
    },
]);

const createTableData = ref([]);
const bomData = ref([]);
const createBOMLoading = ref(false); // 创建bomloading

const sizeAll = ref(false);
const colorAll = ref(false);
const fullscreenHandleShow = ref(false);

watchEffect(() => {
    if (props.colors && props.sizes) {
        const { sizes = [], colors = [] } = props;
        const boms = [];
        const col = colors.map((m) => ({
            colorName: m.colorNum,
            checked: false,
        }));
        sizes.map((sm) => {
            boms.push({
                sizeNum: sm.sizeNum,
                colors: col,
            });
        });
        bomData.value = boms;
        let oldCreateTableData = deepClone2(createTableData.value);
        let list = deepClone2(bomData.value);
        createTableData.value = list.filter((res) => {
            return res.sizeNum.split("-").length > 1;
        });
        createTableData.value.forEach((item) => {
            item["colorsList"] = [];
            let index = oldCreateTableData.findIndex((item1) => {
                return item1.sizeNum == item.sizeNum;
            });
            if (index != -1) {
                item["colorsList"] = oldCreateTableData[index].colorsList
                    ? [...oldCreateTableData[index].colorsList]
                    : [];
            }
            item["colorsList"] = item.colorsList.filter((c) => {
                let i = colors.findIndex((c2) => {
                    return c2.colorNum == c;
                });
                return i != -1;
            });
            if (item["colorsList"].length == colors.length) {
                item["checkAll"] = true;
            } else {
                item["checkAll"] = false;
            }
        });
    }
});
const updateData = (lists) => {
    if (lists && lists.length > 0) {
        let list = lists.map((res) => {
            if (
                res.sizeList &&
                res.sizeList.length > 0 &&
                Object.prototype.toString.call(res.sizeList[0]) ===
                    "[object Object]"
            ) {
                res["sizeList"] = res.sizeList.map((res) => {
                    return res.sizeNum;
                });
            }
            res["ida"] = res.ID;
            return res;
        });
        createTableData.value = deepClone2(lists[0].spec ? lists[0].spec : []);
        createBOMLoading.value = true;
        treeSetID(list);
        tableData.value = [];
        setTimeout(() => {
            createBOMLoading.value = false;
            tableData.value = deepClone2(list);
        }, 10);
    }
};

async function createBOM() {
    // 包装物料
    let pL = tableData.value.filter((item) => {
        return item.is_pack == 1;
    });
    let packList = deepClone2(pL);
    tableData.value = null;
    tableData.value = [];
    // 创建bom参数
    let l1 = deepClone2(createTableData.value);
    let l2 = [];
    l1.forEach((v) => {
        if (v.colorsList && v.colorsList.length > 0) {
            l2.push({
                sizeNum: v.sizeNum,
                colors: v.colorsList,
            });
        }
    });
    const params = {
        styleNum: props.formData.styleNum,
        spec: l2,
    };
    let obj1 = {};
    let obj2 = {};
    // console.log("======params", params);
    createBOMLoading.value = true;
    // 获取创建bom配件
    await genMasterBOMList(params).then((res) => {
        createBOMLoading.value = false;
        if (res.code === 0) {
            let listPart = [];
            let resList = deepClone2(res.data.list);
            resList?.forEach((part, partIndex) => {
                part["ida"] = part.productSpecAccessorySpecId;
                part["componentNum"] = part.componentNum + part.colorNum;
                if (part.sizeList) {
                    part.sizeList = part.sizeList.map((s) => {
                        return s.sizeNum;
                    });
                }
                if (part.children && part.children.length > 0) {
                    part.children.forEach((childP) => {
                        childP["componentNum"] =
                            childP.componentNum + childP.colorNum;
                        childP["ida"] = childP.productSpecAccessorySpecId
                            ? childP.productSpecAccessorySpecId
                            : Math.floor(Math.random() * 1000000000);
                        childP["sizeList"] = [];
                        // part.children.push(childP);
                    });
                }
                listPart.push(part);
            });
            let data1List = listPart.filter((item) => {
                return (
                    item.sizeList &&
                    (item.accessoryType == "斋架" ||
                        item.accessoryType == "齋架")
                );
            });
            // 排序
            data1List.sort((a, b) => {
                // if (a.listOrder !== b.listOrder) {
                //     return b.listOrder - a.listOrder;
                // }
                if (a.listOrder !== b.listOrder) {
                    return b.listOrder - a.listOrder;
                } else if (a.componentNum + a.colorNum !== b.componentNum + b.colorNum) {
                    let a1 = (a.componentNum || '') + (a.colorNum || '')
                    let b1 = (b.componentNum || '') + (b.colorNum || '')
                    return a1.localeCompare(b1);
                }
            });
            data1List.forEach((item) => {
                // 第一部分
                item.sizeList?.forEach((s) => {
                    let sizePre = s.split("-")[0];
                    // let sizeLast = s.split("-")[2];

                    if (!obj1[sizePre]) obj1[sizePre] = [];
                    let i1 = obj1[sizePre].findIndex((r) => {
                        return r.ida == item.ida;
                    });
                    if (i1 == -1) {
                        if (item.children && item.children > 0) {
                            obj1[sizePre].push(item);
                        } else {
                            obj1[sizePre].unshift(item);
                        }
                    }
                });
                // 第二部分
                item.includedAngleList?.forEach((sizeLast) => {
                    if (!obj2[sizeLast]) obj2[sizeLast] = [];
                    let i2 = obj2[sizeLast].findIndex((r) => {
                        return r.ida == item.ida;
                    });
                    if (i2 == -1) {
                        if (item.children && item.children > 0) {
                            obj2[sizeLast].push(item);
                        } else {
                            obj2[sizeLast].unshift(item);
                        }
                    }
                });
            });
            let zhaijiaList = deepClone2(props.zhaiJiaZhuDangList);
            if (zhaijiaList && zhaijiaList.length > 0) {
                zhaijiaList.forEach((level1Item) => {
                    if (level1Item.ID) delete level1Item.ID;
                });
            }
            // 第一部分
            for (let key in obj1) {
                // 第一部分
                let index1 = zhaijiaList.findIndex((item) => {
                    let l = item.componentNum.split("-");
                    return l[l.length - 1] == key;
                });
                if (index1 == -1) break;
                let data1 = zhaijiaList[index1];
                data1["ida"] = data1.componentNum;
                data1["oldLct"] = data1.lct;
                data1["children"] = deepClone2(obj1[key]);
                data1["index"] = "1";
                data1.children.forEach((d1) => {
                    d1["index"] = "2";
                    d1["ida"] = key + d1.ida;
                    if (d1.children) {
                        d1.children.forEach((d2) => {
                            d2["ida"] = key + d2.ida;
                            d2["index"] = "3";
                        });
                    }
                });
                data1["sizeList"] = createTableData.value
                    .filter((v) => {
                        return v.sizeNum.split("-")[0] == key;
                    })
                    .map((v1) => {
                        return v1.sizeNum;
                    });
                data1["includedAngleList"] = [];

                if (data1.children.length > 0) tableData.value.push(data1);
            }
            // 第二部分
            for (let key in obj2) {
                let index2 = zhaijiaList.findIndex((item) => {
                    let l = item.componentNum.split("-");
                    return l[l.length - 1] == key;
                });
                if (index2 == -1) break;
                let data2 = zhaijiaList[index2];
                data2["ida"] = data2.componentNum;
                data2["children"] = deepClone2(obj2[key]);
                data2["index"] = "1";
                data2["oldLct"] = data2.lct;
                data2.children.forEach((d1) => {
                    d1["index"] = "2";
                    d1["ida"] = key + d1.ida;
                    if (d1.children) {
                        d1.children.forEach((d2) => {
                            d2["ida"] = key + d2.ida;
                            d2["index"] = "3";
                        });
                    }
                });
                data2["sizeList"] = [];
                data2["includedAngleList"] = [key];
                if (data2.children.length > 0) tableData.value.push(data2);
            }
            // 第三部分
            let data3List = listPart
                .filter((val) => {
                    return val.accessoryType == "配件";
                })
                .map((res) => {
                    res["ida"] = res.ida;
                    res["index"] = "1";
                    let p = deepClone2(res);
                    p["sizeList"] = p.sizeList;
                    p["includedAngleList"] = p.includedAngleList || [];
                    p["colorList"] = p.colorList ? [...p.colorList] : [];
                    if (p.is_na && p.is_na == 1) {
                        p["sizeList"] = [];
                        p["includedAngleList"] = [];
                        p["colorList"] = [];
                    }

                    if (p.children) {
                        p.children.map((p1) => {
                            p1["index"] = "2";
                            return p1;
                        });
                    }
                    return p;
                });
            data3List.forEach(item => {
                if (item.colorList && item.colorList.length > 0) {
                    item.colorList.sort((a, b) => {
                        return a.localeCompare(b)
                    })
                }
            })
            data3List.sort((a, b) => {
                // if (a.listOrder !== b.listOrder) {
                //     return a.listOrder - b.listOrder;
                // } else if (a.componentNum + a.colorNum !== b.componentNum + b.colorNum) {
                //     let a1 = (a.componentNum || '') + (a.colorNum || '')
                //     let b1 = (b.componentNum || '') + (b.colorNum || '')
                //     return a1.localeCompare(b1);
                // } else {
                //     let a2 = a.colorList ? a.colorList.join('') : ''
                //     let b2 = b.colorList ? b.colorList.join('') : ''
                //     return a2.localeCompare(b2);
                // }
                let c1 = ''
                let c2 = ''
                if (a.colorList && a.colorList[0]) {
                    c1 = a.colorList[0]
                }
                if (b.colorList && b.colorList[0]) {
                    c2 = b.colorList[0]
                }
                let a1 = (a.componentNum || '') + (a.colorNum || '')
                let b1 = (b.componentNum || '') + (b.colorNum || '')
                if (a.listOrder !== b.listOrder) {
                    return a.listOrder - b.listOrder;
                } else if (c1 != c2) {
                    return c1.localeCompare(c2);
                } else if (a1 != b1) {
                    return a1.localeCompare(b1);
                }
            });
            tableData.value = tableData.value.concat(data3List);
            // 原有包装物料
            tableData.value = tableData.value.concat(packList);
            tableData.value.forEach((v) => {
                v["spec"] = deepClone2(createTableData.value);
            });
            ElMessage({
                type: "success",
                message: "创建完成",
            });
            treeSet(tableData.value);
            tableData.value = deepClone2(tableData.value);
        }
    });
}

// 树结构更新
const treeSet = (list) => {
    list.forEach((item) => {
        item["num"] = item.num ? item.num + "" : "";
        if (item.children && item.children.length > 0) {
            treeSet(item.children);
        }
    });
};
// 树ID
const treeSetID = (list) => {
    list.forEach((item) => {
        item["ida"] = item.ID;
        if (item.children && item.children.length > 0) {
            treeSet(item.children);
        }
    });
};

function addBom() {
    let ida = new Date().getTime();
    for (let i = 0; i < addNum.value; i++) {
        tableData.value.push({
            is_pack: 1,
            index: "1",
            ida: ida + "_" + i,
        });
    }
    visible.value = false;
    addNum.value = 1;
}

const SortCoItemShow = ref(false);
// const SortCoItem = ref({});
const SortCoItemList = ref([]);
const SortCoItemHandle = (row, index) => {
    SortCoItemShow.value = true;
    if (row.is_pack != 1) {
        SortCoItemList.value = [row];
    } else {
        SortCoItemList.value = tableData.value.filter((item) => {
            return item.is_pack == 1;
        });
        SortCoItemList.value.map((item1) => {
            if (item1.is_pack == 1) {
                item1["sizeList"] = item1["sizeList"] ? item1["sizeList"] : [];
                item1["includedAngleList"] = item1["includedAngleList"]
                    ? item1["includedAngleList"]
                    : [];
                item1["colorList"] = item1["colorList"]
                    ? item1["colorList"]
                    : [];
                item1["SellGroup"] = item1["SellGroup"]
                    ? item1["SellGroup"]
                    : [];
            }
        });
    }

    if (props.sizes) {
        SortCoItemList.value.map((SortCoItem) => {
            let sizeL1 = props.sizes.filter((s) => {
                return s.sizeNum.split("-").length == 1;
            });
            let sizeL2 = props.sizes.filter((s) => {
                return s.sizeNum.split("-").length > 1;
            });
            if (
                SortCoItem["sizeList"]?.length == sizeL2.length &&
                SortCoItem["includedAngleList"]?.length == sizeL1.length
            ) {
                SortCoItem["sizeCheckedAll"] = true;
            } else {
                SortCoItem["sizeCheckedAll"] = false;
            }
            if (SortCoItem["colorList"]?.length == props.colors.length) {
                SortCoItem["colorCheckedAll"] = true;
            } else {
                SortCoItem["colorCheckedAll"] = false;
            }
        });
    }
    console.log("table====>", tableData.value);
};

// 颜色全选
const colorCheckAll = (val, data) => {
    let cc = props.colors.map((res) => {
        return res.colorNum;
    });
    data["colorCheckedAll"] = val;
    if (val) {
        data.colorList = [...cc];
    } else {
        data.colorList = [];
    }
};
// 颜色改变
const colorListChange = (data) => {
    let cc = props.colors.map((res) => {
        return res.colorNum;
    });
    if (cc.length == data.colorList.length) {
        data["colorCheckedAll"] = true;
    } else {
        data["colorCheckedAll"] = false;
    }
};
// 尺码全选
const sizeCheckAll = (val, data) => {
    let ss1 = props.sizes
        .filter((res) => {
            return res.sizeNum.split("-").length > 1;
        })
        .map((res) => {
            return res.sizeNum;
        });
    let ss2 = props.sizes
        .filter((res) => {
            return res.sizeNum.split("-").length == 1;
        })
        .map((res) => {
            return res.sizeNum;
        });
    data["sizeCheckedAll"] = val;
    if (val) {
        data["sizeList"] = [...ss1];
        data["includedAngleList"] = [...ss2];
    } else {
        data["sizeList"] = [];
        data["includedAngleList"] = [];
    }
};
// 尺码改变
const sizeListChange = (data) => {
    let ss1 = props.sizes
        .filter((res) => {
            return res.sizeNum.split("-").length > 1;
        })
        .map((res) => {
            return res.sizeNum;
        });
    let ss2 = props.sizes
        .filter((res) => {
            return res.sizeNum.split("-").length == 1;
        })
        .map((res) => {
            return res.sizeNum;
        });
    if (
        ss1.length == data.sizeList.length &&
        ss2.length == data.includedAngleList.length
    ) {
        data["sizeCheckedAll"] = true;
    } else {
        data["sizeCheckedAll"] = false;
    }
};

// 尺码全选
const sizeAllChange = (val) => {
    SortCoItemList.value.forEach((data) => {
        sizeCheckAll(val, data);
    });
};

// 颜色全选
const colorAllChange = (val) => {
    SortCoItemList.value.forEach((data) => {
        colorCheckAll(val, data);
    });
};

// 删除包装
const packDel = () => {
    let list1 = tableData.value.filter((item) => {
        return !item.isDel;
    });
    tableData.value = [];
    tableData.value = deepClone2(list1);
};

// 获取Bom包装物料数据
const genMasterBOMListForPackageFun = (data) => {
    let params = {
        componentNum: data.componentNum,
    };
    genMasterBOMListForPackage(params).then((res) => {
        if (res.code == 0) {
            data["accessoryName"] = res.data.accessoryName;
            data["group"] = res.data.group;
            data["materialDesc"] = res.data.standardDesc;
            data["unit"] = res.data.unit;
            data["lct"] = res.data.lct;
            data["lctOld"] = res.data.lctOld;
        }
    });
};

// 颜色全选

const handleCheckAllChange = (val, row, colorsList, colors) => {
    row.colorsList = val ? row.colors.map((item) => item.colorName) : [];
    row.isIndeterminate = false;
};

const handleCheckedCitiesChange = (value, row) => {
    console.log(value, row);
    const checkedCount = value.length;
    row.checkAll = checkedCount === row.colors.length;
    row.isIndeterminate = checkedCount > 0 && checkedCount < row.colors.length;
};

const tableRowClassName = ({ row, rowIndex }) => {
    // 根据行数据或行索引返回类名
    if (row.children && row.children.length > 0) {
        // 假设我们想要给索引为1的行添加一个特殊的类名
        return "special-row";
    } else {
        return "";
    }
};

 // 聚焦全选
 function handleFocus(e) {
      e.target.select()
    }
 // 限制6位小数
 function handleInput(row) {
    // 使用正则表达式限制只能有六位小数
    const regex = /^(\d+)?(\.\d{0,6})?$/;
    if (!regex.test(row.num)) {
    // 如果输入不符合规则，则设置为上次有效的值
        row.num = row.num?.substring(0, row.num.length - 1);
    }
}

defineExpose({
    tableData,
    createTableData,
    updateData,
});
</script>


<style lang="scss" scoped>
@import url("@/style/common/common.scss");

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title-box {
    display: flex;
    align-items: center;

    .title {
        font-size: 20px;
        font-weight: 600;
        margin-right: 8px;
    }
}
:deep(.cell) {
    display: flex;
    align-items: center;
}
.dialog-style {
    display: flex;
    justify-content: center;
    .component-num {
        flex: 0 0 140px;
    }
    .size {
        flex: 0 0 300px;
        display: flex;
        align-items: flex-start;
    }
    .color {
        margin-left: 20px;
        display: flex;
        align-items: flex-start;
        flex: 1;
    }
    .group {
        flex: 0 0 200px;
    }
    .num {
        flex: 0 0 80px;
        padding-right: 10px;
    }
}
:deep(.el-table__expand-icon) {
    display: none !important;
}
:deep(.el-table__indent) {
    display: none;
}
:deep(.el-table__placeholder) {
    display: none;
}
:deep(.special-row) {
    background: rgb(199, 239, 254) !important;
}
:deep(
        .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
    ) {
    background: #f8fb8a !important;
}
:deep(.el-checkbox:last-of-type) {
    margin-right: 20px;
}
.fullscreen-handle {
    padding: 20px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1500;
    background: #fff;
    overflow: scroll;
    // :deep(.el-scrollbar__wrap) {
    //     height: calc(100vh - 108px);
    //     overflow: scroll;
    // }
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
    border-color: var(--el-checkbox-checked-icon-color);
}
:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: var(--el-checkbox-checked-input-border-color);
}
:deep(.el-checkbox__input.is-disabled + span.el-checkbox__label) {
    color: var(--el-checkbox-checked-text-color);
}
</style>
<style lang="scss">
.dialog-box-1{
    .el-dialog__footer{
        padding-top: 5px;
    }
}
</style>